<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
li{ list-style:none;}
a{ text-decoration:none;}
body{background:#23232f;padding:50px;}
.btn{ background:#0f0f14  url(img/bgL.jpg) no-repeat;float:left;}
.btnR{background:url(img/bgR.jpg) no-repeat right 0;float:left;padding:4px 4px 0 3px;}
.btn li{float:left;padding-left:1px;}
.btn a{float:left;background:url(img/btnL.jpg) no-repeat;}
.btn span{float:left;background:url(img/btnR.jpg) no-repeat right 0;height:31px; font-size:14px; line-height:30px;color:#fff;padding:0 18px;}
.btn a:hover,.btn .active{background-image:url(img/hoverL.jpg);}
.btn a:hover span,.btn .active span{ background-image:url(img/hoverR.jpg);}

</style>
</head>

<body>
<div class="box">
  <div class="btn">
    <ul class="btnR">
      <li>
        <a href="img滑动门.html"><span>Miaov</span></a>
      </li>
      <li>
        <a href="img滑动门 - 副本.html"><span>课程</span></a>
      </li>
      <li>
        <a href="img滑动门 - 副本 (2).html" class="active"><span>关于我们</span></a>
      </li>
      <li>
        <a href="img滑动门 - 副本 (3).html"><span>加入Miaov</span></a>
      </li>
    </ul>
  </div>
</div>
</body>
</html>
